{% block sw_settings_payment_detail %}
<sw-page class="sw-settings-payment-detail">

    {% block sw_settings_payment_detail_header %}
    <template #smart-bar-header>
        <h2>{{ placeholder(paymentMethod, 'name', $tc('sw-settings-payment.detail.textHeadline')) }}</h2>
    </template>
    {% endblock %}

    {% block sw_settings_payment_detail_actions %}
    <template #smart-bar-actions>
        {% block sw_settings_payment_detail_actions_abort %}
        <mt-button
            v-tooltip.bottom="tooltipCancel"
            :disabled="isLoading || undefined"
            variant="secondary"
            size="default"
            @click="onCancel"
        >
            {{ $tc('global.default.cancel') }}
        </mt-button>
        {% endblock %}

        {% block sw_settings_payment_detail_actions_save %}
        <sw-button-process
            v-tooltip.bottom="tooltipSave"
            class="sw-payment-detail__save-action"
            :is-loading="isLoading"
            :process-success="isSaveSuccessful"
            :disabled="isLoading || !acl.can('payment.editor') || undefined"
            variant="primary"
            @update:process-success="saveFinish"
            @click.prevent="onSave"
        >
            {{ $tc('sw-settings-payment.detail.buttonSave') }}
        </sw-button-process>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_settings_payment_detail_language_switch %}
    <template #language-switch>
        <sw-language-switch
            :save-changes-function="saveOnLanguageChange"
            :abort-change-function="abortOnLanguageChange"
            @on-change="onChangeLanguage"
        />
    </template>
    {% endblock %}

    {% block sw_settings_payment_detail_content %}
    <template #content>
        <sw-card-view>
            <template v-if="isLoading">
                <sw-skeleton />
                <sw-skeleton />
            </template>

            <template v-else>
                {% block sw_product_stream_detail_content_language_info %}
                <sw-language-info
                    :entity-description="placeholder(paymentMethod, 'name', $tc('sw-settings-payment.detail.textHeadline'))"
                />
                {% endblock %}

                {% block sw_settings_payment_detail_content_card %}
                <mt-card
                    position-identifier="sw-settings-payment-detail-content"
                    :title="$tc('sw-settings-payment.detail.titleCard')"
                    :is-loading="isLoading"
                >
                    <template v-if="!isLoading">
                        {% block sw_settings_payment_detail_content_field_plugin %}
                        <sw-plugin-box
                            v-if="!!paymentMethod.pluginId"
                            :plugin-id="paymentMethod.pluginId"
                        />
                        {% endblock %}

                        <sw-container
                            columns="3fr 3fr 1fr"
                            gap="0px 30px"
                        >
                            {% block sw_settings_payment_detail_content_field_name %}

                            <mt-text-field
                                v-model="paymentMethod.name"
                                name="sw-field--paymentMethod-name"
                                class="sw-settings-payment-detail__field-name"
                                required
                                :disabled="!acl.can('payment.editor') || undefined"
                                :label="$tc('sw-settings-payment.detail.labelName')"
                                :placeholder="placeholder(paymentMethod, 'name', $tc('sw-settings-payment.detail.placeholderName'))"
                                :error="paymentMethodNameError"
                            />
                            {% endblock %}

                            {% block sw_settings_payment_detail_content_field_technical_name %}

                            <mt-text-field
                                v-model="paymentMethod.technicalName"
                                name="sw-field--paymentMethod-technicalName"
                                class="sw-settings-payment-detail__field-technical-name"
                                required
                                :disabled="!acl.can('payment.editor') || technicalNameIsProvided || undefined"
                                :label="$tc('sw-settings-payment.detail.labelTechnicalName')"
                                :placeholder="placeholder(paymentMethod, 'technicalName', $tc('sw-settings-payment.detail.placeholderTechnicalName'))"
                                :error="paymentMethodTechnicalNameError"
                                :help-text="$tc('sw-settings-payment.detail.helpTextTechnicalName')"
                            >
                                <template #hint>
                                    <span v-if="technicalNameIsProvided">{{ $tc('sw-settings-payment.detail.hintTextTechnicalNameIsProvided', { name: paymentMethod.translated?.name ?? paymentMethod.name }) }}</span>
                                </template>
                            </mt-text-field>
                            {% endblock %}

                            {% block sw_settings_payment_detail_content_field_position %}
                            <mt-number-field
                                v-model="paymentMethod.position"
                                name="sw-field--paymentMethod-position"
                                class="sw-settings-payment-detail__field-position"
                                :disabled="!acl.can('payment.editor') || undefined"
                                :label="$tc('sw-settings-payment.detail.labelPosition')"
                                :placeholder="$tc('sw-settings-payment.detail.placeholderPosition')"
                            />
                            {% endblock %}
                        </sw-container>

                        <sw-container
                            columns="repeat(auto-fit, minmax(250px, 1fr))"
                            gap="0px 30px"
                        >
                            {% block sw_settings_payment_detail_base_content_field_description %}
                            <mt-textarea
                                v-model="paymentMethod.description"
                                name="sw-field--paymentMethod-description"
                                :disabled="!acl.can('payment.editor') || undefined"
                                :model-value="paymentMethod.description"
                                class="sw-settings-payment-detail__description"
                                :label="$tc('sw-settings-payment.detail.labelDescription')"
                                :placeholder="placeholder(paymentMethod, 'description', $tc('sw-settings-payment.detail.placeholderDescription'))"
                            />
                            {% endblock %}

                            {% block sw_settings_payment_detail_base_content_media_upload %}
                            <sw-upload-listener
                                :upload-tag="uploadTag"
                                auto-upload
                                @media-upload-finish="setMediaItem"
                            />
                            <sw-media-upload-v2
                                :disabled="!acl.can('payment.editor') || undefined"
                                :upload-tag="uploadTag"
                                :source="mediaItem"
                                class="sw-settings-payment-detail__logo-image-upload"
                                :allow-multi-select="false"
                                variant="regular"
                                :label="$tc('sw-settings-payment.detail.labelLogoUpload')"
                                :default-folder="paymentMethod.getEntityName()"
                                @media-drop="onDropMedia"
                                @media-upload-sidebar-open="openMediaSidebar"
                                @media-upload-remove-image="onUnlinkLogo"
                            />
                            {% endblock %}
                        </sw-container>

                        <sw-container
                            columns="repeat(auto-fit, minmax(250px, 2fr))"
                            gap="0px 30px"
                        >
                            {% block sw_settings_payment_detail_content_field_active %}

                            <mt-switch
                                v-model="paymentMethod.active"
                                name="sw-field--paymentMethod-active"
                                class="sw-settings-payment-detail__field-active"
                                :disabled="!acl.can('payment.editor') || undefined"
                                :label="$tc('sw-settings-payment.detail.labelActive')"
                            />
                            {% endblock %}

                            {% block sw_settings_payment_detail_content_field_after_order_enabled %}

                            <mt-switch
                                v-model="paymentMethod.afterOrderEnabled"
                                name="sw-field--paymentMethod-afterOrderEnabled"
                                class="sw-settings-payment-detail__field-after-order"
                                :disabled="!acl.can('payment.editor') || undefined"
                                :label="$tc('sw-settings-payment.detail.labelAfterOrderEnabled')"
                            />
                            {% endblock %}
                        </sw-container>
                    </template>
                </mt-card>
                {% endblock %}

                {% block sw_settings_payment_detail_top_rule %}
                <mt-card
                    class="sw-settings-payment-detail__condition_container"
                    position-identifier="sw-settings-payment-detail-condition-container"
                    :title="$tc('sw-settings-payment.detail.topRule')"
                    :is-loading="isLoading"
                >
                    {% block sw_settings_payment_detail_top_rule_select %}
                    <sw-select-rule-create
                        v-if="!isLoading"
                        class="sw-settings-payment-detail__field-availability-rule"
                        :disabled="!acl.can('payment.editor') || undefined"
                        :rule-id="paymentMethod.availabilityRuleId"
                        :rule-filter="ruleFilter"
                        :placeholder="$tc('sw-settings-payment.detail.placeholderAvailabilityRule')"
                        rule-aware-group-key="paymentMethods"
                        @save-rule="onSaveRule"
                        @dismiss-rule="onDismissRule"
                    />
                    {% endblock %}
                </mt-card>
                {% endblock %}

                {% block sw_settings_payment_detail_custom_field_sets %}
                <mt-card
                    v-if="showCustomFields"
                    position-identifier="sw-settings-payment-detail-custom-field-sets"
                    :title="$tc('sw-settings-custom-field.general.mainMenuItemGeneral')"
                    :is-loading="isLoading"
                >
                    <sw-custom-field-set-renderer
                        :entity="paymentMethod"
                        :disabled="!acl.can('payment.editor') || undefined"
                        :sets="customFieldSets"
                    />
                </mt-card>
                {% endblock %}

                {% block sw_settings_payment_detail_delete_payment_method %}
                <mt-card
                    v-if="!isNewPaymentMethod && acl.can('payment.deleter')"
                    position-identifier="sw-settings-payment-detail-delete"
                    class="sw-settings-payment-detail-delete"
                    :title="$tc('sw-settings-payment.detail.delete.textHeadline')"
                    :is-loading="isLoading"
                >
                    <mt-banner
                        v-if="forbidDelete"
                        variant="info"
                    >
                        {{ $tc('sw-settings-payment.detail.delete.textAlert') }}
                    </mt-banner>

                    <div class="sw-settings-payment-detail-delete__container">
                        <mt-button
                            variant="critical"
                            ghost
                            :disabled="forbidDelete || !acl.can('payment.deleter') || undefined"
                            @click="showDeleteModal = true"
                        >
                            {{ $tc('sw-settings-payment.detail.delete.textButton') }}
                        </mt-button>
                    </div>
                </mt-card>
                {% endblock %}

                {% block sw_settings_payment_detail_delete_modal %}
                <sw-modal
                    v-if="showDeleteModal && acl.can('payment.deleter')"
                    :title="$tc('global.default.warning')"
                    variant="default"
                    @modal-close="showDeleteModal = false"
                >

                    {% block sw_settings_payment_detail_delete_modal_info %}
                    <div class="sw_theme_manager__confirm-delete-text">
                        <p class="text-secondary">
                            {{ $tc('sw-settings-payment.detail.delete.modal.textConfirmation') }}
                        </p>
                    </div>
                    {% endblock %}

                    {% block sw_settings_payment_detail_delete_modal_footer %}
                    <template #modal-footer>
                        {% block sw_settings_payment_detail_reset_modal_cancel %}
                        <mt-button
                            size="small"
                            variant="secondary"
                            @click="showDeleteModal = false"
                        >
                            {{ $tc('global.default.cancel') }}
                        </mt-button>
                        {% endblock %}

                        {% block sw_settings_payment_detail_reset_modal_confirm %}
                        <mt-button
                            :disabled="deletionInProcess || undefined"
                            variant="critical"
                            size="small"
                            @click="deletePaymentMethod"
                        >
                            {{ $tc('sw-settings-payment.detail.delete.modal.buttonDelete') }}
                        </mt-button>
                        {% endblock %}
                    </template>
                    {% endblock %}
                </sw-modal>
                {% endblock %}
            </template>
        </sw-card-view>
    </template>
    {% endblock %}

    <template #sidebar>
        <sw-sidebar :propagate-width="true">
            <sw-sidebar-media-item ref="mediaSidebarItem">
                <template
                    #context-menu-items="media"
                >
                    <sw-context-menu-item @click="setMediaFromSidebar(media.mediaItem)">
                        {{ $tc('sw-settings-payment.detail.sidebar.labelUseAsLogo') }}
                    </sw-context-menu-item>
                </template>
            </sw-sidebar-media-item>
        </sw-sidebar>
    </template>

</sw-page>
{% endblock %}
